﻿@model WebExtras.JQFlot.FlotChart

<p>
  In order to draw <strong>pie graphs</strong> you need <strong>jquery.flot.pie.js</strong> i.e the
  pie graph plugin.
</p>

<div class="well ui-well">
  <h4>Slightly modifying our series and options we get...</h4>
  <pre><code>
  FlotSeries serie1 = new FlotSeries
  {
    label = "Serie1",
    data = 24.2658                    <span class="comment">// Note that this is a single double value as opposed to an 2d array</span>    
  };
  FlotSeries serie2 = new FlotSeries
  {
    label = "Serie2",
    data = 86.1                       <span class="comment">// Note that this is a single double value as opposed to an 2d array</span>    
  };
  FlotSeries serie3 = new FlotSeries
  {
    label = "Serie3",
    data = 91.0254                    <span class="comment">// Note that this is a single double value as opposed to an 2d array</span>    
  };

  <span class="comment">// Since we are drawing a pie we must supply each slice as a separate serie</span>
  FlotSeries[] series = new FlotSeries[] { serie1, serie2, serie3 };

  FlotOptions options = new FlotOptions
  {
    series = new SeriesOptions
    {
      pie = new PieGraph { show = true }    <span class="comment">// This will denote that you want a Pie graph</span>
    }
  }
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And we have a pie graph...</h4>
  <div class="content">    
    <div id="pie-graph" class="pie-graph">
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function () {
      $.plot($('#pie-graph'), [@Html.Raw(string.Join(",", Model.chartSeries.Select(f => f.ToString())))], @Html.Raw(Model.chartOptions.ToString()));    
    });
  </script>
</div>
